<template>
  <div
    class="app-container"
    style="height: calc(100vh - 84px); background: #eeeeee"
  >
    <div
      style="
        margin-bottom: 20px;
        background: #ffffff;
        padding: 15px;
        border-radius: 3px;
      "
    >
      <el-table :data="pageData">
        <el-table-column label="学校名称" align="center" prop="schoolName" />
        <el-table-column label="账单描述" align="center" prop="billDesc" />
        <el-table-column label="缴费类型" align="center" prop="expTypeName" />
        <el-table-column label="合计金额" align="center" prop="totalAmt" />
        <el-table-column label="缴费金额" align="center" prop="paidAmt" />
        <el-table-column label="未缴金额" align="center" prop="unpaidAmt" />
        <el-table-column
          label="上传时间"
          align="center"
          prop="createTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="缴费开始时间"
          align="center"
          prop="billPayStartDate"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.billPayStartDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="缴费结束时间"
          align="center"
          prop="billPayEndDate"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.billPayEndDate) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="background: #ffffff; padding: 15px; border-radius: 3px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="编码" prop="code">
          <el-input
            v-model="queryParams.code"
            placeholder="请输入编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入姓名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="queryParams.phone"
            placeholder="请输入手机号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="缴费状态" prop="payStatus">
          <el-select
            v-model="queryParams.payStatus"
            placeholder="请选择缴费状态"
          >
            <el-option
              v-for="item in shList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-if="adminRoles === 'school'"
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            >批量修改</el-button
          >
        </el-col>

        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <el-table
        v-loading="loading"
        :data="purchaseItemList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
          :selectable="selectable"
        />
        <el-table-column label="编码" align="center" prop="code" />
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="学校" align="center" prop="updateBy" />
        <el-table-column label="金额" align="center" prop="amount" />
        <el-table-column label="支付状态" align="center" prop="payStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.payStatus == 0">未支付</span>
            <span v-if="scope.row.payStatus == 1">已支付</span>
          </template>
        </el-table-column>
        <el-table-column
          label="支付时间"
          align="center"
          prop="payTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.payTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listDetail, xgBill, getBill } from "@/api/business/bill";

export default {
  name: "PurchaseItem",
  data() {
    return {
      adminRoles: "",
      pageData: [],
      shList: [
        { name: "未支付", value: 0 },
        { name: "已支付", value: 1 },
      ],
      activeCellIndex: [],
      disabled: true,
      dialoading: true,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 采购单明细表格数据
      purchaseItemList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      supplierOptions: [],
      supplierItem: "",
      purchaseList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        billId: null,
        payStatus: null,
        code: null,
        name: null,
        phone: null,
      },
      createBy: "",
      supplierId: "",
      //商品列表
      goodsList: [],
      totalG: 0,
      queryParamsG: {
        pageNum: 1,
        pageSize: 10,
        supplierId: null,
      },
    };
  },
  created() {
    if (this.$store.state?.user?.roles) {
      this.adminRoles = this.$store.state?.user?.roles[0];
    }
    console.log(this.$route?.query);
    this.queryParams.billId = this.$route?.query?.id;
    // this.pageData = [JSON.parse(this.$route?.query.item)];
    // console.log(this.pageData);
    this.getList();
    this.getDetail();
  },
  methods: {
    selectable(row, index) {
      if (row.payStatus == 1) {
        return false; // 禁用
      } else {
        return true; //不禁用
      }
    },
    getDetail() {
      getBill(this.queryParams.billId).then((response) => {
        this.pageData = [response.data];
      });
    },
    getList() {
      if (this.queryParams.billId) {
        this.loading = true;
        listDetail(this.queryParams).then((response) => {
          this.purchaseItemList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    },
    //获取商品列表
    getlistGodds() {
      this.dialoading = true;
      listGoods(this.queryParamsG).then((response) => {
        let item = response.rows;
        item.forEach((row) => {
          row.count = 1;
        });
        this.goodsList = item;
        this.totalG = response.total;
        this.dialoading = false;
      });
    },
    changeSelect(val) {
      console.log(this.supplierItem);
    },
    //获取类型
    getTypes() {
      addGoodsPage().then((response) => {
        this.supplierOptions = response.suppliers;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      if (!this.queryParamsG.supplierId) {
        this.$modal.msgWarning("请先选择供货商");
        return;
      }
      this.ids = [];
      this.getlistGodds();
      this.open = true;
      this.title = "选择商品";
    },
    /** 修改按钮操作 */

    /** 提交按钮 */
    submitForm() {
      this.ids.forEach((row) => {
        row.unitPrice = row.costPrice / row.weight;
      });
      console.log(22, this.ids);
      this.purchaseList = this.ids;
      this.open = false;
    },

    //保存
    submitSave() {
      if (!this.purchaseList.length) {
        this.$modal.msgWarning("请先选择商品");
        return;
      }
      let arr = [];
      this.purchaseList.forEach((row) => {
        arr.push({
          unitPrice: row.unitPrice,
          goodsId: row.id,
          weight: row.weight * row.count,
          supplierId: row.supplierId,
          // count: row.count,
        });
      });
      getPurchaseItem(JSON.stringify(arr)).then((res) => {
        this.$modal.msgSuccess("新增成功");
        this.$router.push({ path: "/+4/purchase" });
      });
    },
    // 删除
    /** 删除按钮操作 */
    handleDelete() {
      const userIds = this.ids;
      this.$modal
        .confirm("是否确认修改？")
        .then(function () {
          return xgBill(userIds);
        })
        .then(() => {
          this.getList();
          this.getDetail();
          this.$modal.msgSuccess("修改成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "sxsd/purchaseItem/export",
        {
          ...this.queryParams,
        },
        `purchaseItem_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
